<!--
 * @Author: wangding
 * @Date: 2020-11-04 18:16:13
 * @LastEditTime: 2020-12-28 09:29:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\overview-inverter.vue
-->
<template>
    <div>
        <Header :sample="1"></Header>
        <div class="overview-inverter-main-tabs-box">
            <!-- {{$t('login.loginName')}} -->
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane :label="$t('device.inverter.statistics')" name="1">
                    <overviewInverter></overviewInverter>
                </el-tab-pane>
                <el-tab-pane :lazy='true' :label="$t('device.inverter_real_time_display.title')" name="2" :disabled="true">
                </el-tab-pane>
                <el-tab-pane :label="$t('alarm.deviceAlarm')" name="3" :disabled="true">
                </el-tab-pane>
                <el-tab-pane :label="$t('battery.statistics')" name="4" :disabled="true">
                </el-tab-pane>
                <el-tab-pane :label="$t('inverterState.chart.title')" name="5" :disabled="true">
                </el-tab-pane>
                <el-tab-pane :label="$t('report.statistical_report')" name="6" :disabled="true">
                </el-tab-pane>
            </el-tabs>
            <div class="sn-text-box">
                    <div>
                        <span>{{$t('inverter')}}：</span>
                        <span class="red-text">
                            {{returnSession('selRow_inverter_sn')}}
                        </span>
                    </div>
                    <div>
                        <span>{{$t('devWifi.wifiSN')}}：</span>
                        <span class="red-text">
                            {{returnSession('selRow_wifi_sn')}}
                        </span>
                    </div>
                    <div>
                        <span>{{$t('test.deviceTest.historyTest.Last_update')}}：</span>
                        <span class="red-text">
                            {{uploadTimeValue}}
                        </span>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import Header from '../../components/Header'
import overviewInverter from '../overview/overview_inverter'
export default {
    components: {
        overviewInverter,
        Header
    },
    props: {

    },
    data() {
        return {
            activeName:'1',
            uploadTimeValue:'',
            
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.deviceGetInverterFromRedis()
    },
    methods: {
        async deviceGetInverterFromRedis(){
            let res = await this.API.deviceGetInverterFromRedis({
                inverterSN:this.returnSession('selRow_inverter_sn'),
                wifiSN:this.returnSession('selRow_wifi_sn'),
                currentTime:moment().format("YYYY-MM-DD HH:mm:ss"),
            })
            this.$store.commit('setDeviceDataList',res)
            this.uploadTimeValue = res.uploadTimeValue
        },
        returnSession(val){
            return sessionStorage.getItem(val)
        },
        handleClick(){
            
        }
    },
};
</script>

<style  lang="less" >
.overview-inverter-main-tabs-box{
    position: relative;
    height: calc(100% - 50px) ;
    font-size: 13px;
    .el-tabs__nav {
        transform: translateX(15px) !important;
    }
    .el-tabs__content{
        padding: 10px 15px;
    }
    .sn-text-box{
        position: absolute;
        top: 48px;
        left: 13px;
    }
    .el-tabs__content{
        padding: 17px 15px;
        box-shadow: 0px 0px 30px -3px #aaa;
        margin: 35px 10px;
        min-height: 90%;
        border-radius: 7px;
        min-width: 1200px;
    }
    .el-tabs--top{
        height: 100%;
    }
    .sn-text-box{
        display: flex;
        div {
            margin-right:20px;
        }
        .red-text{
            color:red;
        }
        
    }
}
</style>
